import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

// ElementPlus 按需导入，提升首屏加载速度
import {
  ElButton,
  ElLink,
  ElMessage,
  ElMessageBox,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElSelect,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElCheckbox,
  ElCheckboxGroup,
  ElSwitch,
  ElSlider,
  ElColorPicker,
  ElDatePicker,
  ElUpload,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElTag,
  ElProgress,
  ElAlert,
  ElLoading,
  ElIcon,
  ElRow,
  ElCol,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElFooter,
  ElMenu,
  ElMenuItem,
  ElSubMenu,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElPageHeader,
  ElCard,
  ElCarousel,
  ElCarouselItem,
  ElCollapse,
  ElCollapseItem,
  ElTabs,
  ElTabPane,
  ElTree,
  ElTransfer,
  ElDescriptions,
  ElDescriptionsItem,
  ElStatistic,
  ElImage,
  ElAvatar,
  ElDrawer,
  ElPopover,
  ElTooltip,
  ElPopconfirm,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElBadge,
  ElDivider,
  ElCalendar,
  ElBacktop,
  ElSkeleton,
  ElEmpty,
  ElResult,
  ElAffix,
  ElAnchor,
  ElAnchorLink,
  ElConfigProvider
} from 'element-plus'

// 创建Pinia实例
const pinia = createPinia()

const app = createApp(App)

// 注册ElementPlus组件
const elementComponents = [
  ElButton, ElLink, ElMessage, ElMessageBox, ElDialog, ElForm, ElFormItem,
  ElInput, ElInputNumber, ElSelect, ElOption, ElRadio, ElRadioGroup,
  ElCheckbox, ElCheckboxGroup, ElSwitch, ElSlider, ElColorPicker,
  ElDatePicker, ElUpload, ElTable, ElTableColumn, ElPagination,
  ElTag, ElProgress, ElAlert, ElLoading, ElIcon, ElRow, ElCol,
  ElContainer, ElHeader, ElAside, ElMain, ElFooter, ElMenu,
  ElMenuItem, ElSubMenu, ElBreadcrumb, ElBreadcrumbItem,
  ElPageHeader, ElCard, ElCarousel, ElCarouselItem, ElCollapse,
  ElCollapseItem, ElTabs, ElTabPane, ElTree, ElTransfer,
  ElDescriptions, ElDescriptionsItem, ElStatistic, ElImage,
  ElAvatar, ElDrawer, ElPopover, ElTooltip, ElPopconfirm,
  ElDropdown, ElDropdownMenu, ElDropdownItem, ElBadge,
  ElDivider, ElCalendar, ElBacktop, ElSkeleton, ElEmpty,
  ElResult, ElAffix, ElAnchor, ElAnchorLink, ElConfigProvider
]

elementComponents.forEach(component => {
  app.use(component)
})

// 配置全局属性
app.config.globalProperties.$message = ElMessage
app.config.globalProperties.$msgbox = ElMessageBox

// 使用插件
app.use(pinia)  // 使用Pinia替代Vuex
app.use(router)

// 延迟加载ElementPlus样式，避免阻塞首屏渲染
const loadElementStyles = () => {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = 'https://unpkg.com/element-plus/dist/index.css'
  document.head.appendChild(link)
}

// 页面加载完成后加载样式
if (document.readyState === 'complete') {
  loadElementStyles()
} else {
  window.addEventListener('load', loadElementStyles)
}

// 挂载应用
app.mount('#app')